<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas作业</title>
    <style type="text/css">
        * {

            margin: 0;
            padding: 0;
        }

        canvas {

            display: block;
            margin: 0 auto;
            border: 1px red solid;
        }
    </style>
</head>
<canvas id="canvas" width="800" height="600"></canvas>
<body>
    <script type="text/javascript">
        var canvas = document.querySelector("#canvas");

        var context = canvas.getContext("2d");
        context.strokeStyle = "red";

        // OC绘制五角星
        // UIBezierPath* starPath = UIBezierPath.bezierPath;
        // [starPath moveToPoint: CGPointMake(400, 10)];
        // [starPath addLineToPoint: CGPointMake(408.82, 22.86)];
        // [starPath addLineToPoint: CGPointMake(423.78, 27.27)];
        // [starPath addLineToPoint: CGPointMake(414.27, 39.64)];
        // [starPath addLineToPoint: CGPointMake(414.69, 55.23)];
        // [starPath addLineToPoint: CGPointMake(400, 50)];
        // [starPath addLineToPoint: CGPointMake(385.31, 55.23)];
        // [starPath addLineToPoint: CGPointMake(385.73, 39.64)];
        // [starPath addLineToPoint: CGPointMake(376.22, 27.27)];
        // [starPath addLineToPoint: CGPointMake(391.18, 22.86)];
        // [starPath closePath];
        // [UIColor.grayColor setFill];
        // [starPath fill];

        context.beginPath();

        // 五角星第一种方法
        // 设置是个顶点的坐标，根据顶点制定路径   
        for (var i = 0; i < 5; i++) {   
            context.lineTo(Math.cos((18+i*72)/180*Math.PI)*100+100,   
                            -Math.sin((18+i*72)/180*Math.PI)*100+100);   
            context.lineTo(Math.cos((54+i*72)/180*Math.PI)*40+100,   
                            -Math.sin((54+i*72)/180*Math.PI)*40+100);   
        } 
        context.closePath();

        // 三角形        
        context.moveTo(200, 350);
        context.lineTo(50, 550);
        context.lineTo(350, 550);
        context.lineTo(200, 350);

        // 四边形
        context.moveTo(500, 50);
        context.lineTo(500, 100);
        context.lineTo(600, 100);
        context.lineTo(600, 50);
        context.lineTo(500, 50);

        // 五角星第二种方法
        context.moveTo(400, 10);
        context.lineTo(408.82, 22.86);
        context.lineTo(423.78, 27.27);
        context.lineTo(414.27, 39.64);
        context.lineTo(414.69, 55.23);
        context.lineTo(400, 50);
        context.lineTo(385.31, 55.23);
        context.lineTo(385.73, 39.64);
        context.lineTo(376.22, 27.27);
        context.lineTo(391.18, 22.86);
        context.lineTo(400, 10);

        // 设置边框样式以及填充颜色   
        context.lineWidth="2";   
        context.fillStyle = "#F6F152";   
        context.strokeStyle = "#F5270B";   
        context.fill();

        context.stroke();
    </script>
</body>
</html>